<template>
	<view class="content">
		<view class="complain-list-title">请选择你遇到的问题：</view>


		<view class="complain-list">
			<view class="complain-item" v-for="(item,index) in list" :key="index" @click="toDetail(index)">
				{{item}}
			</view>
			<view class="complain-item" @click="copy">
				人工客服
			</view>
		</view>


		<view class="public_footer_help" @click="copy" style="display: flex; align-items: center;">
			如需帮助
			<uni-icons type="headphones" size="20" color="#fff" class="margin-lr-xs"></uni-icons>
			<!-- #ifdef MP-ALIPAY || H5 -->
			请联系QQ售后客服
			<!-- #endif -->
			<!-- #ifdef MP-TOUTIAO -->
			请联系售后客服
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	import {
		confirm,
		toast,
		toPage
	} from "../../tools";
	export default {
		data() {
			return {
				list: [
					'支付成功商家未提供商品或服务',
					'信息填写错误',
					'重复购买/二次付款',
					'不满意商家的商品或服务',
					'交易非本人支付',
					'其他问题',
				]
			}
		},
		onLoad() {

		},
		methods: {
			toDetail(index) {
				uni.navigateTo({
					url: '/pages/msg/detail?name=' + this.list[index]
				})
			},
			// copy() {
			// 	confirm('温馨提示', '客服QQ号：1312507423 已复制，请前去咨询。', () => {
			// 		uni.setClipboardData({
			// 			data: '1312507423',
			// 			success: function() {
			// 				console.log('success');
			// 			}
			// 		});
			// 	}, '确定', false)
			// },
			copy() {
				// #ifdef MP-ALIPAY || H5
				confirm('温馨提示', '客服QQ号：1312507423 已复制，请前去咨询。', () => {
					uni.setClipboardData({
						data: '1312507423',
						success: function() {
							console.log('success');
						}
					});
				}, '确定', false)
				// #endif
				// #ifdef MP-TOUTIAO
				uni.makePhoneCall({
					phoneNumber: '18633060110' //仅为示例
				});
				// #endif
			}
		}
	}
</script>

<style>
	.complain-list-title {
		font-size: 32rpx;
		font-weight: 700;
		padding: 30rpx;
		background-color: #f1f1f1;
	}

	.complain-list {
		padding: 28rpx 28rpx 2rpx;
	}

	.complain-item {
		padding: 24rpx 56rpx 24rpx 24rpx;
		border-radius: 12rpx;
		background: #f0f0f0 url() right 14px center no-repeat;
		background-size: 12rpx 22rpx;
		font-size: 28rpx;
		margin-bottom: 24rpx;
	}


	.public_footer_help {
		/* position: fixed;
		 bottom: 0;
		 left: 0; */
		overflow: hidden;
		line-height: 1.5;
		text-align: center;
		width: max-content;
		color: #fff;
		margin: 1rem auto;
		padding: .8rem;
		border-radius: .2rem;
	}

	.public_footer_help>img {
		width: .2rem;
		height: .2rem;
		margin-right: .05rem;
		margin-left: .05rem;
		display: inline-block;
		vertical-align: middle
	}

	.public_footer_help .words {
		display: inline-block
	}

	.public_footer_help .kf {
		position: relative;
		display: inline-block;
		text-decoration: underline;
		padding-left: 30px;
		color: #fff;
	}

	.public_footer_help .kf::before {
		content: "";
		position: absolute;
		left: 5px;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
		background: url() no-repeat;
		width: 20px;
		height: 20px;
		-moz-background-size: 100%;
		-o-background-size: 100%;
		background-size: 100%
	}
</style>